<template>
    <div>
        <!-- 公用组件Logo -->
        <logo></logo>
        <!-- 联系方式 -->
        <div class = "contactFang">
            <span class = "contact">如有疑问请联系客户经理</span>
            <p class = "manager">
                <span class = "name">{{saleId}}</span>
                <span class = "telephone">{{salePhone}}</span>
            </p>
        </div>
        <div  class = "content">
            <!-- 大数据教学平台 -->
            <div class = "teaching-platform or">
                <!-- 开通账号 -->
                <div class = "opening" v-if = "teachingAddAccounts.length != 0">
                    <div class = "content-div orOne">
                         <p class = "list" v-for = "(item,index) in teachingAddAccounts" :key = 'index'>
                            <span class = "account">账号：</span>
                            <span class = "number" :title = "item.usernumber" >{{ item.usernumber | ellipsis }}</span>
                            <span class = "copy" @click = "copy(1,index)">复制</span>
                        </p>
                    </div>
                    <a href = "http://111.40.26.62:50051/login" target="_blank" style = "color:#000;"><p class = "getInto" @click = "getInto()">进入系统</p></a>
                    <a href = "http://111.40.26.62:50051/login" target="_blank" style = "color:#000;"><p class = "demoVideo">演示视频</p></a>
                </div>
                <!-- 没开通账号 -->
                <div class = "no-opening" v-else>
                    <img src = "../../assets/images/locking.png" alt="">
                    <p>您未开通账号</p>
                    <p>如需要请联系客户经理</p>
                </div>
            </div>
            <!-- 大数据实训平台 -->
            <div class = "training-platform or">
                <!-- 开通账号 -->
                <div class = "opening" v-if = "trainingAddAccounts.length != 0">
                    <div class = "content-div orTow">
                         <p class = "list" v-for = "(item,index) in trainingAddAccounts" :key = 'index'>
                            <span class = "account">账号：</span>
                            <span class = "number" :title = "item.usernumber">{{ item.usernumber | ellipsis }}</span>
                            <span class = "copy" @click = "copy(2,index)">复制</span>
                        </p>
                    </div>
                    <a href = "http://111.40.26.62:50000/login" target="_blank" style = "color:#000;"><p class = "getInto" @click = "getInto()">进入系统</p></a>
                    <a href = "http://111.40.26.62:50051/login" target="_blank" style = "color:#000;"><p class = "demoVideo">演示视频</p></a>
                </div>
                <!-- 没开通账号 -->
                <div class = "no-opening" v-else>
                    <img src = "../../assets/images/locking.png" alt="">
                    <p>您未开通账号</p>
                    <p>如需要请联系客户经理</p>
                </div>
            </div>
            <!-- 大数据科研平台 -->
            <div class = "scientific-research-platform or">
                <!-- 开通账号 -->
                <div class = "opening" v-if = "scientificAddAccounts.length != 0">
                    <div class = "content-div orThree">
                         <p class = "list" v-for = "(item,index) in scientificAddAccounts" :key = 'index'>
                            <span class = "account">账号：</span>
                            <span class = "number" :title = "item.usernumber">{{ item.usernumber | ellipsis }}</span>
                            <span class = "copy" @click = "copy(3,index)">复制</span>
                        </p>
                    </div>
                    <a href = "http://vip.ithyxy.com:36888/octagon" target="_blank" style = "color:#000;"><p class = "getInto" @click = "getInto()">进入系统</p></a>
                    <a href = "http://111.40.26.62:50051/login" target="_blank" style = "color:#000;"><p class = "demoVideo">演示视频</p></a>
                </div>
                <!-- 没开通账号 -->
                <div class = "no-opening" v-else>
                    <img src = "../../assets/images/locking.png" alt="">
                    <p>您未开通账号</p>
                    <p>如需要请联系客户经理</p>
                </div>
            </div>
            <!-- 数据管理系统 -->
            <div class = "data-management or">
                <!-- 开通账号 -->
                <div class = "opening" v-if = "managementAddAccounts.length != 0">
                    <div class = "content-div orFour">
                         <p class = "list" v-for = "(item,index) in managementAddAccounts" :key = 'index'>
                            <span class = "account">账号：</span>
                            <span class = "number" :title = "item.usernumber">{{ item.usernumber | ellipsis}}</span>
                            <span class = "copy" @click = "copy(4,index)">复制</span>
                        </p>
                    </div>
                    <a href = "http://47.95.243.56//signin" target="_blank" style = "color:#000;"><p class = "getInto" @click = "getInto()">进入系统</p></a>
                    <a href = "http://111.40.26.62:50051/login" target="_blank" style = "color:#000;"><p class = "demoVideo">演示视频</p></a>
                </div>
                <!-- 没开通账号 -->
                <div class = "no-opening" v-else>
                    <img src = "../../assets/images/locking.png" alt="">
                    <p>您未开通账号</p>
                    <p>如需要请联系客户经理</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Logo from "../../components/Logo.vue"

import Clipboard from 'clipboard';
export default {
    components:{
        Logo
    },
    data () {
        return {
            value:'',
            schoolName:'',
            saleId:'',
            salePhone:'',
            teachingAddAccounts:[],
            trainingAddAccounts:[],
            scientificAddAccounts:[],
            managementAddAccounts:[],
        }
    },
    //靳春野过滤器filter，判断文字过长而显示省略号
    filters:{
        ellipsis(value){
            if (!value) return '';
            if (value.length > 11) {
                return value.slice(0,11) + '...'
            }
            return value
        },
    },
    created(){
        // console.log(decodeURIComponent(this.getQueryString('schoolName')),326)
        // console.log(this.getQueryString('schoolName'),3262222222222222)
        // var utff = this.getQueryString('schoolName')
        // console.log(utff,3263333333)
        // this.getCharFromUtf8(utff)
        // console.log(this.getCharFromUtf8(utff),9999999999999999)

        // this.getCharFromUtf8(utff)
        // this.utf8ToChar(utff)
        // console.log(this.getCharFromUtf8(utff),this.utf8ToChar(utff))
        // this.Change(utff)
        // encodeURI(encodeURI(utff))
        // console.log(unescape("%u5F20"),111111111111)
        // console.log(unescape("%3F%3F%3F"),111111111111)
        // console.log(decodeURIComponent(utff),2323232323)
        // this.saleId = this.$route.query.saleId
        // this.schoolName   = this.getQueryVariable("schoolName")
        // this.saleId   = this.getQueryVariable("saleId")
        // this.salePhone   = this.getQueryVariable("salePhone")
        // console.log(window.location.href)

        this.salePhone = this.$route.query.salePhone
        this.saleId = this.$route.query.saleId
        this.schoolName = this.$route.query.schoolName

        // console.log(String(this.$route.query.schoolName),33333333333333)
        // console.log(this.$route.query.schoolName,33333333333333)

        // console.log(this.$route.query.saleId,111)
        // this.elasticLayout()
        // this.infoData()
        this.infoData()

    },
    methods: {
        // Change(pValue) {
        //     return pValue.replace(/[^\u0000-\u00FF]/g, function($0) {
        //         return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")
        //     });
        // },
        // // name 是你要获取的那个参数的字段 比如 code=我是谁 name 就是 code
        // getQueryString (name) {
        //     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        //     var r = window.location.search.substr(1).match(reg)
        //     if (r !== null) return r[2]
        //     return null
        // },
        // //将编码转换成字符
        // utf8ToChar(str) {
        //     var iCode, iCode1, iCode2;
        //     iCode = parseInt("0x" + str.substr(1, 2));
        //     iCode1 = parseInt("0x" + str.substr(4, 2));
        //     iCode2 = parseInt("0x" + str.substr(7, 2));
        //     return String.fromCharCode(((iCode & 0x0F) << 12) | ((iCode1 & 0x3F) << 6) | (iCode2 & 0x3F));
        // },

        // //将URL中的UTF-8字符串转成中文字符串
        // getCharFromUtf8(str) {
        //     var cstr = "";
        //     var nOffset = 0;
        //     if (str == "")
        //         return "";
        //     str = str.toLowerCase();
        //     nOffset = str.indexOf("%e");
        //     if (nOffset == -1)
        //         return str;
        //     while (nOffset != -1) {
        //         cstr += str.substr(0, nOffset);
        //         str = str.substr(nOffset, str.length - nOffset);
        //         if (str == "" || str.length < 9)
        //             return cstr;
        //         cstr += utf8ToChar(str.substr(0, 9));
        //         str = str.substr(9, str.length - 9);
        //         nOffset = str.indexOf("%e");
        //     }
        //     return cstr + str;
        // },
        // getQueryVariable(variable){
        //     var query = window.location.search.substring(1);
        //     var vars = query.split("&");
        //     for (var i=0;i<vars.length;i++) {
        //             var pair = vars[i].split("=");
        //             if(pair[0] == variable){return pair[1];}
        //     }
        //     return(false);
        // },
        // 复制功能
        copy(type,index){
            if(type == 1){
                this.value = this.teachingAddAccounts[index].usernumber
            }else if(type == 2){
                this.value = this.trainingAddAccounts[index].usernumber
            }else if(type == 3){
                this.value = this.scientificAddAccounts[index].usernumber
            }else if(type == 4){
                this.value = this.managementAddAccounts[index].usernumber
            }
            const input = document.createElement('input');  // 这里的逻辑就是新建立一个input标签，
            document.body.appendChild(input); // 把input添加到body中
            input.setAttribute('value',this.value); // 设置input的value值，this.hd3href
            input.select();  									// select 选中input里面的所有文本内容
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({  								  // 提示消息
                message: "复制成功",
                type: 'success'
            });
            document.body.removeChild(input);   // 最近需要销毁
        },
        // 点击进入系统按钮
        getInto(){
            console.log(jia[0].number)
        },
        // 计算如果账号数量小于三个，使用弹性布局
    //     elasticLayout(){
    //         let list = this.teachingAddAccounts
    //         console.log(list.length,987456)
    //         if( list.length < 3 ){
    //             $(function(){
    //                 $('.content-div').css({
    //                     "display": "-webkit-flex",
    //                     "display": "flex",
    //                     /*三个div被挤到中间了*/
    //                     "align-content": "center",
    //                     /*以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中*/
    //                     /* align-items: center,  */
    //                     "flex-wrap": "wrap",
    //                 });
    //                 console.log(list.length);
    //             });
    //         }
    //     },
        // 数据
        infoData(){
            let self = this
            self.$axios.get('/school/querySchoolInfoById?schoolName=' + self.schoolName).then(response => {
                let res = response.data
                if(res.code === 200){
                    // 教学
                    self.teachingAddAccounts = res.data.teachingAddAccounts
                    // 实训
                    self.trainingAddAccounts = res.data.trainingAddAccounts
                    // 科研
                    self.scientificAddAccounts = res.data.scientificAddAccounts
                    // 数据
                    self.managementAddAccounts = res.data.managementAddAccounts

                    console.log(res.data.teachingAddAccounts.length,12)
                    if( res.data.teachingAddAccounts.length < 3 ){
                        $(function(){
                            $('.orOne').css({
                                "display": "-webkit-flex",
                                "display": "flex",
                                /*三个div被挤到中间了*/
                                "align-content": "center",
                                /*以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中*/
                                /* align-items: center,  */
                                "flex-wrap": "wrap",
                            });
                            console.log(res.data.teachingAddAccounts.length,12);
                        });
                    }
                    if(res.data.trainingAddAccounts.length < 3){
                        $(function(){
                            $('.orTow').css({
                                "display": "-webkit-flex",
                                "display": "flex",
                                /*三个div被挤到中间了*/
                                "align-content": "center",
                                /*以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中*/
                                /* align-items: center,  */
                                "flex-wrap": "wrap",
                            });
                        });
                    }
                    if(res.data.scientificAddAccounts.length < 3){
                        $(function(){
                            $('.orThree').css({
                                "display": "-webkit-flex",
                                "display": "flex",
                                /*三个div被挤到中间了*/
                                "align-content": "center",
                                /*以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中*/
                                /* align-items: center,  */
                                "flex-wrap": "wrap",
                            });
                        });
                    }
                    if(res.data.managementAddAccounts.length < 3){
                        $(function(){
                            $('.orFour').css({
                                "display": "-webkit-flex",
                                "display": "flex",
                                /*三个div被挤到中间了*/
                                "align-content": "center",
                                /*以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中*/
                                /* align-items: center,  */
                                "flex-wrap": "wrap",
                            });
                        });
                    }
                }else{
                    self.$notify({
                        type: 'danger', message: res.message
                    })
                }
            })
        },
    }
}
</script>

<style lang = "scss" scoped>
    /* 经理信息 */
    .contactFang{
        width: 400px;
        height: 60px;
        position: absolute;
        top: 20px;
        right: 15%;
        color: #fff;
        .contact{
            font-size: 14px;
            float: left;
            position: relative;
        }
        .manager{
            width: 220px;
            height: 30px;
            border: 1px solid #868686;
            border-radius: 20px;
            position: relative;
            margin-left: 24px;
            bottom: 6px;
            float: left;
            .name{
                font-size: 16px;
                font-weight: bold;
                line-height: 30px;
                margin-left: 20px;
            }
            .telephone{
                font-size: 16px;
                font-weight: bold;
                line-height: 30px;
                margin-left: 12px;
            }
        }
    }
    .content{
        width: 1200px;
        height: 620px;
        position: relative;
        margin: 0 auto;
        margin-top: 50px;
        .or{
            width: 590px;
            height: 300px;
            float: left;
            position: relative;
        }
        /* 大数据教学平台 */
        .teaching-platform{
            background: url("../../assets/images/teaching-platform.png") no-repeat;
            position: relative;
            margin: 0 20px 20px 0;
            overflow: hidden;
        }
        /* 大数据实训平台 */
        .training-platform{
            background: url("../../assets/images/training-platform.png") no-repeat;
            position: relative;
            margin: 0 0 20px 0;
            overflow: hidden;
        }
        /* 大数据科研平台 */
        .scientific-research-platform{
            background: url("../../assets/images/scientific-research-platform.png") no-repeat;
            position: relative;
            margin: 0 20px 0 0;
            overflow: hidden;
        }
        /* 数据管理系统 */
        .data-management{
            background: url("../../assets/images/data-management.png") no-repeat;
            overflow: hidden;
        }
        /* 开通账号 */
        .opening{
            width: 300px;
            height: 300px;
            float: right;
            /* opacity: .5; */
            background: rgba(0,0,0,0.5);
            position: relative;
            opacity: 0;
            transition: 1s;
            transform:translateX(300px);
            .content-div{
                width: 216px;
                height: 104px;
                position: relative;
                margin-top: 65px;
                margin-left: 48px;
                overflow: overlay;
                .list{
                    width: 216px;
                    height: 33px;
                    color: #fff;
                    .account{
                        font-size: 16px;
                    }
                    .number{
                        font-size: 16px;
                    }
                    .copy{
                        font-size: 12.5px;
                        border: 1px solid #fff;
                        border-radius: 10px;
                        padding: 2px 7px;
                        cursor: pointer;
                        &:hover{
                            color: #000;
                            background: #fff;
                        }
                    }
                }
                .list:nth-child(1){
                    margin-top: 5px;
                }
            }
            /*滚动条样式*/
            .content-div::-webkit-scrollbar {/*滚动条整体样式*/
                width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
                height: 2px;
            }
            .content-div::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                border-radius: 5px;
                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: rgba(255,255,255,1);
            }
            .content-div::-webkit-scrollbar-track {/*滚动条里面轨道*/
                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                border-radius: 0;
                background: rgba(0,0,0,0.1);
            }
            /* 进入系统点击按钮 */
            .getInto{
                width: 120px;
                height: 30px;
                font-size: 16px;
                text-align: center;
                line-height: 30px;
                background: #ffb500;
                border-radius: 20px;
                position: relative;
                margin: 0 auto;
                margin-top: 20px;
                cursor: pointer;
            }
            .demoVideo{
                width: 120px;
                height: 30px;
                font-size: 16px;
                text-align: center;
                line-height: 30px;
                background: #1bbc9b;
                border-radius: 20px;
                position: relative;
                margin: 0 auto;
                margin-top: 10px;
                cursor: pointer;
            }
        }
        /* 没开通账号 */
        .no-opening{
            width: 300px;
            height: 300px;
            float: right;
            /* opacity: .5; */
            background: rgba(0,0,0,0.5);
            position: relative;
            opacity: 0;
            transition: 1s;
            transform:translateX(300px);
            img{
                width: 29px;
                height: 37px;
                display: block;
                position: relative;
                margin: 0 auto;
                margin-top: 110px;
                margin-bottom: 15px;
            }
            p{
                font-size: 14px;
                color: #fff;
                position: relative;
                text-align: center;
            }
        }
        /* 大数据教学平台——动画效果 */
        .teaching-platform:hover .opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
        .teaching-platform:hover .no-opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
        /* 大数据实训平台——动画效果 */
        .training-platform:hover .opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
        .training-platform:hover .no-opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
        /* 大数据科研平台——动画效果 */
        .scientific-research-platform:hover .opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
        .scientific-research-platform:hover .no-opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
        /* 数据管理系统——动画效果 */
        .data-management:hover .opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
        .data-management:hover .no-opening{
            opacity: 1;
            transition: 1s;
            transform:translateX(0px);
        }
    }
</style>
